<template>
  <transition name="upoverlay" appear>
    <div class="up-overlay" v-show="show">
      <div class="up-overlay-content">
        <slot />
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  methods: {
  }
}
</script>

<style lang="less">
:root {
  --van-overlay-z-index: 1;
  --van-overlay-background: rgba(0, 0, 0, 0.7);
}

.up-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--van-overlay-z-index);
  width: 100%;
  height: 100%;
  background: var(--van-overlay-background);
}

.upoverlay-enter-active, .upoverlay-leave-active {
  transition: opacity 0.5s;
}
.upoverlay-enter, .upoverlay-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.up-overlay-content {
  position: relative;
  height: 100%;
}
</style>
